<template>
	<view>
		<view style="height: 100rpx;"></view>
		<view class="d-flex " @tap="index">
			<image class="header" src="@/static/img/login/right.png" mode="widthFix" />
			<view class="header-title">返回首页</view>
		</view>
		<view class="">
			<view class="bg">
				<image src="@/static/img/login/logo.png" mode="widthFix" style="width: 300rpx; height: 222rpx;"></image>
			</view>
			<view class="shouji d-flex">
				<image src="@/static/img/login/shoujihao.png" mode="widthFix" class="image">
				</image>
				<!--  -->
				<input class="uni-input" maxlength="11" type="number" placeholder="请输入手机号" v-model="username"
					@focus="Focus" @blur="Blur" />
				<!--  -->
			</view>
			<view class=" d-flex shouji">
				<image src="@/static/img/login/mimashezhi.png" mode="widthFix" class="image">
				</image>

				<!--  -->
				<input class="uni-input " :password="showPassword" placeholder="请输入密码" v-model="password" @focus="Focus"
					@blur="Blur" />
				<!--  -->

				<image class="pawicon" :src="showPassword== true ? eve:eve_avtion" mode="widthFix"
					@tap="changePassword"></image>

				<text class="paw" @tap="Password">| 忘记密码</text>
			</view>
			<view class="">
				<button class="btn" @click="submit" :style="{'background-color':backgroundColor}">登录</button>
			</view>
			<view class="fs28 d-flex text">
				<view class="" @tap="register">新用户注册</view>
				<view class="text1" @tap="captcha">验证码登录</view>
			</view>
		</view>
		<!-- <view class="d-flex center">
			<text class="hr"></text>
			<text class="footer">其它登陆方式</text>
			<text class="hr"></text>
		</view>
		<view class="d-flex j-sa">
			<image src="@/static/img/login/weixin.png" mode="widthFix" style="width:88rpx;margin-left: 80rpx;"></image>
			<image src="@/static/img/login/qq.png" mode="widthFix" style="width:88rpx;"></image>
			<image src="@/static/img/login/weibo.png" mode="widthFix" style="width:88rpx;margin-right: 80rpx;"></image>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				backgroundColor: '#ce0a08',
				showPassword: true,
				eve: "/static/img/login/biyan.png",
				eve_avtion: "/static/img/login/zhengyan.png",
				username: '',
				password: '',
				type: 1
			}
		},

		computed: {
			...mapState(['hasLogin', 'userInfo']),

		},

		onLoad(options) {
			options.type = this.type
		},
		methods: {
			...mapMutations(['login', 'logout']),

			Focus() {
				this.backgroundColor = "#e80909"
			},
			Blur() {
				this.backgroundColor = "#af0b08"
			},
			changePassword() {
				if (this.password.length > 0) {
					this.showPassword = !this.showPassword
				}
			},
			register() {
				uni.navigateTo({
					url: './register'
				})
			},
			captcha() {
				uni.navigateTo({
					url: './captcha'
				})
			},
			Password() {
				uni.navigateTo({
					url: 'password'
				})
			},
			// 表单验证
			async submit(type) {
				let reg = await this.$myRequest({
					url: '/login',
					methods: 'POST',
					data: {
						username: this.username,
						type: this.type,
						password: this.password,
					},
				})
				if (reg.data.status == 1) {
					this.$api.msg('登录成功！');
					setTimeout(() => {
						let token = reg.data.token;
						uni.setStorageSync('token', token)
						this.Login(token)
					}, 1500)
				}
			},
			async Login(token) {
				let UIfo = await this.$myRequest({
					url: '/getUserInfo',
					methods: 'POST',
					data: {
						token: token
					}
				})
				if (UIfo.data.status == 1) {
					let userInfo = UIfo.data.data

					this.login(userInfo)
					uni.showToast({
						title: '登陆成功',
						icon: "none"
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			index() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		},
	}
</script>

<style lang="scss">
	.header {
		width: 17rpx;
		height: 29rpx;
		margin: 20rpx;
		margin-right: 15rpx;
	}

	.header-title {
		letter-spacing: 2rpx;
		margin-top: 14rpx;
		margin-left: 20upx;
		color: gray;
	}

	.center {
		// margin-top: 200rpx;
		// margin-left: 95rpx;
		margin: 230rpx 0 30rpx 95rpx;
	}

	.footer {
		font-size: 28rpx;
		margin: 0 20rpx;
		color: #999;
	}

	.hr {
		width: 180rpx;
		height: 1rpx;
		background-color: #eaeaea;
		margin-top: 20rpx;
	}

	.bg {
		margin: 100rpx 0 140rpx 230rpx;
	}

	.uni-input {
		padding-left: 15rpx;
		padding-top: -10rpx;
		letter-spacing: 2rpx;
		width: 50%;
	}

	.shouji {
		background-color: #f4f4f4;
		margin: 20rpx auto;
		width: 90%;
		height: 40rpx;
		padding: 30rpx 20rpx;
		border-radius: 80rpx;
		align-items: center;
	}

	.pawicon {
		width: 30rpx;
		height: 20rpx;
		margin-left: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.paw {
		color: #999;
	}

	.btn {
		color: white;
		// background-color: #e80909;
		border-radius: 50rpx;
		margin: 50rpx 40rpx 0 40rpx;
	}

	.text {
		color: #999;
		margin-left: -20rpx;
		margin-top: 30rpx;
		margin-left: 50rpx;
	}

	.text1 {
		margin-left: 380rpx;
	}

	.image {
		width: 35rpx;
		height: 40rpx;
		margin-top: 5rpx;
	}
</style>
